<template>
  <div class="w-full relative">
    <div class="w-full">
      <HeadTail></HeadTail>
    </div>
    <div class="w-full flex flex-row">
      <div class="w-1/5 sm:text-xl xl:text-3xl flex justify-center">
        <div class="flex flex-col items-center w-1/2 xl:ml-[50%]">
          <div class="mt-10 mb-4 cursor-pointer" @click="tohome">首页</div>
          <div class="mt-10 mb-4 cursor-pointer" @click="tosanscks">分类</div>
          <div class="mt-10 mb-4 cursor-pointer" @click="tostore">收藏</div>
          <div class="mt-10 mb-4 cursor-pointer" @click="toorder">订单</div>
        </div>
      </div>
      <div class="w-3/5 flex flex-col sm:text-md xl:text-2xl">
        <div
          class="w-full border border-black flex flex-col mt-2 mb-2"
          v-for="(item, index) in shopmsg"
        >
          <div class="mt-2 ml-2 mb-1">
            <p>{{ item.productName }}</p>
          </div>
          <div class="w-full flex flex-row">
            <div
              class="w-2/5 sm:h-[140px] xl:h-[252px] overflow-hidden rounded-xl ml-2"
            >
              <img :src="item.img.split(',')[1]" alt="" class="w-full" />
            </div>
            <div class="flex flex-col justify-center xl:leading-15 ml-2">
              <p class="xl:-mt-16">商家：{{ item.name }}</p>
              <p class="xl:mt-2">介绍：{{ item.description }}</p>
              <p class="xl:mt-2">价格：￥{{ item.price }}</p>
              <div class="xl:mt-2">
                <el-rate
                  v-model="item.score"
                  disabled
                  show-score
                  text-color="#ff9900"
                />
              </div>
            </div>
          </div>
          <div class="flex justify-end">
            <button class="bg-[#fdc14b] text-white px-3 rounded-md mb-4 mr-4" @click="tocard(item)">
              下单
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import HeadTail from "@/components/Nhome/HeadTail.vue";
import axios from "axios";
import { reactive, ref, onMounted, watchEffect } from "vue";
import { useRouter, useRoute } from "vue-router";
const route = useRoute();
const router = useRouter();
let shopmsg = ref([]);
let num = ref();
onMounted(() => {
  shopmsg.value = JSON.parse(localStorage.getItem("search"));
  console.log(shopmsg.value);
});
function tohome() {
  router.push("Nhome");
}
function toorder() {
  router.push("OrderForm");
}
function tosanscks() {
  router.push("SanscksPane");
}
function tostore() {
  router.push("StoreUp");
}
function tocard(item) {
  router.push({
    name: "Card",
    query: {
      item: JSON.stringify(item),
    },
  });
}
watchEffect(() => {});
</script>
